<style lang='scss' scoped>
@import "@css/style.scss";
.home {
  width: 100%;
  height: 100%;
  background-color: $bgColor;
  overflow: hidden;
  overflow-y: auto;
  &-content {
    height: 100%;
    .activity-520 {
      margin-top: px2rem(-8);
      border-top-left-radius: px2rem(8);
      border-top-right-radius: px2rem(8);
      img {
        display: inline-block;
        width: 33.33%;
      }
    }
    .activity-pin-gou-jie {
      background-color: #fff;
      margin-top: $marginSize;
      img {
        width: 100%;
      }
    }
  }
}
</style>
<template>
  <div class="home" @scroll="onScrollChange" ref="home">
    <navigation-bar :isShowBack="false" :navBarStyle="navBarStyle">
      <template v-slot:nav-left> <img :src="navBarCurrentSlotStyle.leftIcon" alt=""> </template>
      <template v-slot:nav-center> <search :bgColor="navBarCurrentSlotStyle.search.bgColor" :hintColor="navBarCurrentSlotStyle.search.hintColor" :icon="navBarCurrentSlotStyle.search.icon"></search> </template>
      <template v-slot:nav-right> <img :src="navBarCurrentSlotStyle.rightIcon" alt=""> </template>
    </navigation-bar>
    <div class="home-content">
      <my-swiper
        :swiperImgs="swiperImgs.map((item) => item.icon)"
        :height="swiperHeight"
      ></my-swiper>
      <!-- 活动 -->
      <activity>
        <div class="activity-520">
          <img
            v-for="(item, index) in activityDatas"
            :key="index"
            :src="item.icon"
          />
        </div>
      </activity>
      <!-- 功能选项卡  -->
      <mode-options></mode-options>
      <!-- 秒杀模块 -->
      <seconds :dataSource="secondsDatas"></seconds>
      <!-- 拼购节 -->
      <activity>
        <div class="activity-pin-gou-jie">
          <img src="../assets/imgs/haoHuoQiang.gif" alt="" />
        </div>
      </activity>
      <!-- 商品列表 -->
      <goods :layoutType="'3'" :isScroll="false"></goods>
    </div>
  </div>
</template>
<script>
import MySwiper from "@c/swiper/MySwiper";
import Activity from "./currency/Activity.vue";
import ModeOptions from "./currency/ModeOptions.vue";
import Seconds from "./seconds/Seconds.vue";
import Goods from "./goods/Goods.vue";
import NavigationBar from "./currency/NavigationBar.vue";
import Search from './currency/Search.vue';
export default {
  components: {
    MySwiper,
    Activity,
    ModeOptions,
    Seconds,
    Goods,
    NavigationBar,
    Search,
  },
  //keepAlive激活
  activated(){
    this.$refs.home.scrollTop=this.scrollTopValue;
  },
  data() {
    return {
      swiperImgs: [],
      swiperHeight: "184px",
      activityDatas: [],
      secondsDatas: [],
      //navBar
      navBarSlotStyle:{
        normal:{
          leftIcon:require('@img/more-white.svg'),
          //中间
          search:{
            bgColor:'#fff',
            hintColor:'#999',
            icon:require('@img/search.svg')
          },
          //右侧
          rightIcon:require('@img/message-white.svg')
        },
        //高亮
        hightlight:{
          leftIcon:require('@img/more.svg'),
          //中间
          search:{
            bgColor:'#d7d7d7',
            hintColor:'#fff',
            icon:require('@img/search-white.svg')
          },
          //右侧
          rightIcon:require('@img/message.svg')
        }
      },
      //navbar当前使用 
      navBarCurrentSlotStyle:{},
      //navBar定制样式
      navBarStyle:{
        position:'fixed',
        backgroundColor:''
      },
      //页面滚动值
      scrollTopValue:-1,
      //锚点值
      anchor_scroll_top:160
    };
  },
  created() {
    this.navBarCurrentSlotStyle=this.navBarSlotStyle.normal;
    this.init();
  },
  mounted() {},
  methods: {
    //滚动
    onScrollChange($event){
      console.log('onScrollChange');
      this.scrollTopValue=$event.target.scrollTop;
      let opacity=this.scrollTopValue/this.anchor_scroll_top;//透明比例
      if(opacity>=1){
        this.navBarCurrentSlotStyle=this.navBarSlotStyle.hightlight;
      }else{
        this.navBarCurrentSlotStyle=this.navBarSlotStyle.normal;
      }
      this.navBarStyle.backgroundColor=`rgba(255,255,255,${opacity})`;
    },
    init() {
      this.$http
        .all([
          this.$http.get("/swiper"),
          this.$http.get("/activitys"),
          this.$http.get("/seconds"),
        ])
        .then(
          this.$http.spread((swiperImgs, activityData, secondsData) => {
            this.swiperImgs = swiperImgs.list;
            this.activityDatas = activityData.list;
            this.secondsDatas = secondsData.list;
          })
        );
    },
  },
  computed: {},
};
</script>
